<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<p id="p1">这是第一个文本段落</p>
			<p id="p2"><span>这是第二个文本段落</span></p>
			<input type="text" id="text1" value="1">
			
			<input type="button" id="btn1" value="设置p1的文本">
			<input type="button" id="btn2" value="设置p2的html">
			<input type="button" id="btn3" value="设置t1的值">
		</div>
		
		<script src="js/jquery.min.js"></script>
		<script>
			var p1 = $('#p1').text();
			var p2 = $('#p2').html();
			var t1 = $('#text1').val();
			console.log('p1',p1);
			console.log('p2',p2);
			console.log('text1',t1);
			
			$('#btn1').on('click',function(){
				$('#p1').text('Hello World!');
			})
			$('#btn2').on('click',function(){
				$('#p2').html()('<strong>Hello World!</strong>');
			})
			$('#btn3').on('click',function(){
				$('#text1').val('123');
			})
		</script>
		
		<div>
			<ul id="list">
				<li>列表项1</li>
				<li>列表项2</li>
				<li>列表项3</li>
			</ul>
			<input type="button" id="add4" value="添加列表项4">
			<input type="button" id="add5" value="添加列表项5">
		</div>
		<script>
			$(function(){
				$('#add4').on('click',function(){
					$('#list').append('<li>列表项4</li>');
				})
				$('#add5').on('click',function(){
					$('#list').prepend('<li>列表项5</li>');
				})
			})
		</script>
		
		<div>
			<p id="middle">这是一段文本</p>
			<input type="button" id="add1" value="后面插入内容">
			<input type="button" id="add2" value="后面插入内容">
		</div>
		<script>
			$(function(){
				$('#add1').on('click',function(){
					$('#middle').after('<p>后面内容</p>');
				})
				$('#add2').on('click',function(){
					$('#middle').before()('<p>前面内容</p>');
				})
			})
		</script>
		
		<div id="target" style="padding: 15px;background-color: yellow;">
			这是div中的一些文本
			<p>这是div中的一个段落,class=c1</p>
			<p>这是div中的另一个段落</p>
		</div>
		<br>
		<input type="button" id="btnrm" value="移除div元素">
		<input type="button" id="btnem" value="清空div元素">
		<input type="button" id="btnc1" value="移除所有class=c1的元素">
		
		<script>
			$(function(){
				$('#btnrm').on('click',function(){
					$('#target').remove();
				})
				$('#btnrm').on('click',function(){
					$('#target').empty();
				})
				$('#btnrm').on('click',function(){
					$('p').remove('.c1');
				})
			})
		</script>
	</body>
</html>